<template>
  <div ref="chart" :class="className" :style="{ width: width, height: height }" />
</template>

<script setup>
import { nextTick, ref, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  showZoom: {
    type: Boolean,
    default: false
  },
  chartData: {
    type: Object,
    default: () => {}
  }
})

const chart = ref(null);

watch(
  props.chartData,
  (val) => {
    nextTick(() => {
      initChart();
    })
  },
  {deep: true, immediate: true}
)

onBeforeUnmount(() => {
  if(!chart.value) {
    return
  }
  chart.value.dispose();
  chart.value = null;
})

const initChart = () => {
  let { datas, names, dataX, colorList, cell  } = props.chartData;
  let showZoom = props.showZoom;
  let series = [];
  names.forEach((item, index) => {
    series.push({
      name: names[index],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 2
        }
      },
      areaStyle: {
        normal: {
          color: colorList && colorList[index] ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: colorList[index]
          }, {
            offset: 1,
            color: colorList[index].replace("1)", "0)")
          }], false) : '',
          shadowColor: "#000",
          shadowBlur: 5,
        }
      },
      itemStyle: {
        normal: {
          color: colorList && colorList[index] ? colorList[index] : ''
        }
      },
      data: datas[index]
    })
  })
  let chartDom = echarts.init(chart.value,)
  chartDom.clear() 
  chartDom.setOption({
    tooltip: {
      show: false,
      trigger: 'axis',
    },
    legend: {
      show: false,
      icon: 'rect',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 10,
      // data: names,
      x: 'right',
      y: '5',
      textStyle: {
        fontSize: 14,
        color: '#fff'
      }
    },
    dataZoom: showZoom ? [{
      show: showZoom,
      xAxisIndex: [0],
      height: 10,
      bottom: 20,
      start: 0,
      end: 100
    }, {
      type: "inside",
      show: showZoom,
      height: 15,
      start: 0,
      end: 100
    }] : [],
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: '0',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#3F6DA0'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        margin: 10,
        textStyle: {
          fontSize: 14,
          color: '#fff'
        }
      },
      data: dataX
    }],
    yAxis: [{
      type: 'value',
      // name: cell,
      nameTextStyle: {
        fontSize: 14,
        color: '#fff',
        padding: [0, 0, 0, -12]
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#57617B'
        }
      },
      axisLabel: {
        show: false,
        margin: 10,
        textStyle: {
          fontSize: 14,
          color: '#fff'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#0388FB'
        }
      }
    }],
    series: series
  })
}

</script>

<style lang="scss" scoped>

</style>